<!--
 * @Author: lp 654528967@qq.com
 * @Date: 2022-04-21 11:40:57
 * @LastEditors: lp 654528967@qq.com
 * @LastEditTime: 2022-05-11 15:02:17
 * @FilePath: \nien-vue3-admin\src\views\system\processManage\processManage\components\design.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <el-dialog
      v-model:model-value="open1"
      title="Activiti工作流在线流程设计器"
      :before-close="handleClose"
      fullscreen
    >
      <div class="modeler">
        <iframe class="iframe" :src="src" />
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessageBox } from 'element-plus'

const emit = defineEmits(['changeList'])
const props = defineProps({
  // eslint-disable-next-line vue/require-default-prop
  id: {
    type: String,
  },
})

const open1 = ref(false)
const src = computed(() => {
  const id = props.id
  return `/modeler.html?modelId=${ id }`
})
const handleClose = () => {
  ElMessageBox.confirm('请记得点击左上角保存按钮，确定关闭设计窗口?', '确认关闭', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    open1.value = false
    emit('changeList')
  })
}
onMounted(() => {
  window.apiUrl = import.meta.env.VITE_BASE_API
})
defineExpose({
  open1,
})
</script>
<style lang="less" scoped>
.iframe {
  width: 100%;
  height: calc(100vh - 120px);
  border: 0;
}
</style>
